<template>
	<view>
		<view class="header">
			<text v-if="destAddr==''">全部</text>
			<text>{{destAddr}}</text>
			<image src="../../static/iocn16.png" mode=""></image>
			<text v-if="origAddr==''">全部</text>
			<text>{{origAddr}}</text>
			<text>({{totalCount}}条)</text>
		</view>
		<view class="body">
			<view class="container" v-for="(item,index) in list">
			<view class="fl" v-if="item.imgUrl==null">
				<image src="https://syh-1.oss-cn-shanghai.aliyuncs.com/nopic.png"></image>
			</view>
			<view class="fl" v-else>
				<image :src="item.imgUrl"></image>
			</view>
			<view class="fr">
				<view class="text_a" @click="tozhuanxian(item)">
					<image src="../../static/vip.svg" v-if="item.isVIP" />{{item.partnerName}}
				</view>
				<view class="text_b" @click="tozhuanxian(item)">
					<image src="../../static/iocn18.png"></image><text>{{item.detailedAddress}}</text>
				</view>
				<view class="text_d" @click="tozhuanxian(item)">路线: {{item.routeName}}</view>
				<view class="text_c" @click="bohao(item.contactPhone)">电话联系</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	import {
		GetDedLines,
		RouteSetting
	} from '@/public/Api/update.js'
	import {
		setValue,
		getValue
	} from '@/public/storeage/index.js'
	import Tabbar from '@/pages/navigation/sjnavigation.vue';
	export default {
		components: {
			//注册组件
			Tabbar
		},
		data() {
			return {
				list: [],
				pageIndex: 1,
				maxResultCount: 10,
				origAddr: '',
				destAddr: '',
				totalCount:0
			};
		},
		onLoad(option) {
			console.log(option)
			this.destAddr = option.destAddr
			this.origAddr = option.origAddr
		},
		onShow() {
			this.GetDedLines()
		},
		//监听页面触底函数
		onReachBottom() {
			this.pageIndex +=1
			this.GetDedLines()
		},
		methods: {
			// 拨打电话
			bohao(item) {
				let phone = item
				uni.makePhoneCall({
					phoneNumber: phone,
					success: (res) => {},
					fail: (res) => {
						console.log('打电话失败了');
					}
				})
			},
			async GetDedLines() {
				var skipCount = (this.pageIndex-1)*this.maxResultCount
				var maxResultCount = this.maxResultCount
				var origAddr = this.origAddr
				var destAddr = this.destAddr
				var keywords = this.destAddr
				try {
					const {
						data: res
					} = await GetDedLines({
						skipCount,
						maxResultCount,
						origAddr,
						destAddr,
						keywords
					})
					console.log(res)
					this.list = this.list.concat(res.result.items)
					this.totalCount=res.result.totalCount
					if (res.result.totalCount == 0) {
						uni.navigateBack({
							delta: 1, //返回层数，2则上上页
							duration: 2000
						})
						uni.showToast({
							title: `未查到路线`,
							duration: 2000,
						})
						return false
					}
				} catch (e) {}

			},
			tozhuanxian(item) {
				var id = item.id
				uni.navigateTo({
					url: '/pages/Findspecialline/zhuanxian?id=' + id + '&contact=' + item.contact +
						'&contactPhone=' + item.contactPhone + '&officeTelphone=' + item.officeTelphone +
						'&detailedAddress=' + item.detailedAddress + '&partnerName=' + item.partnerName +
						'&purposeName=' + item.purposeName + '&routeName=' + item.routeName + '&imgurl=' + item
						.imgUrl + '&contactPhone=' + item.contactPhone
				})
			},
			// 获取通话记录
			async RouteSetting() {
				var skipCount = this.skipCount
				var maxResultCount = this.maxResultCount

				var id = getValue('id')
				try {
					const {
						data: res
					} = await RouteSetting({
						skipCount,
						maxResultCount,
						id
					})
				} catch (e) {}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		padding: 0 15upx;
	}
    .header{
		width: 97%;
		border-radius: 17upx;
		background: #FFFFFF;
		box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5, 1.75upx 1.75upx 7.01upx 0px #e5e5e5;
		padding: 30upx 20upx;
		align-items: center;
		position: fixed;
		top: 0;
		text{
			padding: 0 10upx;
			font-size: 30upx;
			font-weight: 600;
		}
		image{
			padding: 0 10upx;
			width: 32upx;
			height: 32upx;
		}
	}
	.body{
		margin-top: 100upx;
	}
	.container {
		border-radius: 17upx;
		background: #FFFFFF;
		box-shadow: 1.75upx 1.75upx 7.01upx 0px #e5e5e5, 1.75upx 1.75upx 7.01upx 0px #e5e5e5;
		padding: 30upx 50upx;
		margin-top: 20upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.fl {
			width: 135upx;
			height: 135upx;

			image {
				width: 135upx;
				height: 135upx;
			}
		}

		.fr {
			width: 585upx;
			padding-left: 40upx;

			.text_a {
				font-size: 31upx;
				color: #000;
				font-weight: bold;
				image{
					width: 32upx;
					height: 32upx;
					padding-right: 10upx;
				}
			}

			.text_d {
				font-size: 20upx;
				color: #383838;
			}

			.text_b {
				display: flex;
				align-items: center;

				image {
					width: 32upx;
					height: 32upx;
				}

				text {
					width: 400upx;
					font-size: 24upx;
					padding-left: 10upx;
					color: #383838;
				}
			}

			.text_c {
				width: 133upx;
				height: 51upx;
				background-color: #ef4d3d;
				font-size: 24upx;
				color: #fff;
				text-align: center;
				line-height: 51upx;
				border-radius: 10upx;
				margin-top: 25upx;
				float: right;
			}
		}
	}
</style>
